<template>
<!--二级菜单迭代和隐藏  -->
    <div class="tree">
        <ul>
            <li v-for="(item,i) in items" :key="i">
                <a @click="selected(i)">
                    <span>{{item.name}}</span>
                    <b v-show="!item.flag">^</b>
                    <b  v-show="item.flag">↓</b>
                </a>
                <ul v-for="(sub,j) in item.subItems" :key="j" v-show="item.flag" >
                    <li>
                        <a>{{sub.name}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            items: [
                {
                    name: '电子类',
                    flag: true,
                    subItems: [
                        {name:'手机'},
                        {name:'电脑'},
                        {name:'内存/硬件'},
                    ]
                },
                {
                    name: '服饰类',
                    flag: false,
                    subItems: [
                        {name:'裤子'},
                        {name:'上衣'},
                        {name:'鞋帽'},
                    ]
                },
                {
                    name: '饰品类',
                    flag: false,
                    subItems: [
                        {name:'项链'},
                        {name:'戒指'},
                        {name:'手环'},
                    ]
                }
            ]
        }
    },
    methods: {
        selected(i) {
            this.items[i].flag = !this.items[i].flag;
        }
    },
}
</script>
